<template>
	<view class="user-address">
		<!-- 头部导航 -->
		<u-navbar title="收货地址" :title-bold="true" title-color="#000" :border-bottom="false" custom-class="home-bg" :background="{ background: 'transparent' }"></u-navbar>

		<view class="address-list" v-if="addressList.length != 0">
			<view class="text-top">请选择收货地址</view>

			<radio-group class="radio-group" @change="radioChange">
				<view v-for="(item, index) in addressList" :key="index" class="item mb20 flex align-center flex-between" :data-id="item.id" @tap="onSelect">
					<view class="flex">
						<radio class="radio row" color="#FF2C3C" :value="item.id + ''" :checked="item.isDefault == '2' ? true : false"></radio>

						<view class="address ml20">
							<view class="consignee md bold">
								{{ item.receiverName }}
								<text class="phone ml10">{{ item.phoneNumber }}</text>
							</view>
							<view class="lighter sm mt10" style="width: 500rpx">
								{{ item.address }}
							</view>
						</view>
					</view>
					<view class="operation">
						<view class="row-center flex flex-column align-center flex-center">
							<view style="color: #f05a39" class="row" @click.stop="editAddress(item.id)">
								<image class="icon-md mr10" src="/static/images/icon_edit.png"></image>
								编辑
							</view>
							<view style="color: red" class="row" :data-id="item.id" @tap.stop="showSurePop">
								<image class="icon-md mr10" src="/static/images/icon_del_1.png"></image>
								删除
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>

		<view class="no-address column-center app-bottom" v-else>
			<image class="img-null mt20" src="/static/images/address_null.png"></image>
			<view class="sm muted">暂无添加地址，请添加~</view>
		</view>

		<u-modal
			id="delete-dialog"
			v-model="deleteSure"
			:showCancelButton="true"
			confirm-text="狠心删除"
			confirm-color="#FF2C3C"
			:show-title="false"
			@confirm="delAddressFun"
			@cancel="hidePop"
		>
			<view class="column-center tips-dialog">
				<image class="icon-lg" src="/static/images/icon_warning.png"></image>
				<view style="margin-top: 30rpx">确认删除该地址吗？</view>
			</view>
		</u-modal>

		<view class="row-between fixed ml30">
			<!-- #ifdef H5 || MP-WEIXIN -->
			<!-- 	<view class="btn row-center bg-gray br60 mr20" @click="getWxAddressFun" v-if="isWeixin">
				<image class="icon-lg mr10" src="/static/images/icon_wechat.png"></image>
				<text class="md">微信导入</text>
			</view> -->
			<!-- #endif -->
		</view>
		<!-- 	<view class="flex align-center" @click="addAddress">
			<image src="/static/user/FrameAdd.png" style="width: 38rpx; height: 38rpx; margin-right: 15rpx" mode=""></image>
			新增收货地址
		</view> -->

		<view class="flex align-center buttom">
			<button @click="addAddress">新增收货地址</button>
		</view>
	</view>
</template>

<script>
import user from '@/api/user.js';
import wechath5 from '@/utils/wechath5';
import { isWeixinClient } from '@/utils/tools';
export default {
	data() {
		return {
			addressList: [],
			deleteSure: false,
			currentId: 0,
			isWeixin: true
		};
	},

	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.type = options.type;
		//#ifdef H5
		this.isWeixin = isWeixinClient();
		//#endif
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		this.getAppaddList();
	},

	methods: {
		onSelect(e) {
			if (this.type) {
				let { id } = e.currentTarget.dataset;
				uni.$emit('selectaddress', {
					id
				});
				uni.navigateBack();
			}
		},

		addAddress() {
			uni.navigateTo({
				url: '/pages/address_edit/address_edit'
			});
		},

		editAddress(id) {
			uni.navigateTo({
				url: `/pages/address_edit/address_edit?id=${id}`
			});
		},
		getAppaddList() {
			user.getAppaddList()
				.then((res) => {
					this.addressList = res.rows;
				})
				.catch((erro) => {
					console.log(erro);
				});
		},

		//默认地址
		radioChange(e) {
			let id = e.detail.value;
			user.setDefaultByAddress(id)
				.then((res) => {
					uni.showToast({
						title: '修改地址成功',
						icon: 'success',
						duration: 2000
					});
				})
				.catch((erro) => {
					console.log(erro);
				});
		},

		onLoadFun() {
			this.getAddressListsFun();
		},

		delAddressFun(e) {
			let id = this.currentId;
			user.delAddress(id).then((res) => {
				this.getAppaddList();
			});
		},

		getWxAddressFun() {
			// #ifdef H5
			wechath5.getWxAddress().then((res) => {
				uni.setStorageSync('wxAddress', JSON.stringify(res));
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/address_edit/address_edit`
					});
				}, 200);
			});
			// #endif
			// #ifdef MP-WEIXIN
			uni.authorize({
				scope: 'scope.address',
				success: function (res) {
					uni.chooseAddress({
						success: function (res) {
							uni.setStorageSync('wxAddress', JSON.stringify(res));
							setTimeout(() => {
								uni.navigateTo({
									url: `/pages/address_edit/address_edit`
								});
							}, 200);
						},
						fail: function (res) {
							if (res.errMsg == 'chooseAddress:cancel')
								return this.$toast({
									title: '取消选择'
								});
						}
					});
				},
				fail: function (res) {
					uni.showModal({
						title: '您已拒绝导入微信地址权限',
						content: '是否进入权限管理，调整授权？',

						success(res) {
							if (res.confirm) {
								uni.openSetting({
									success: function (res) {}
								});
							} else if (res.cancel) {
								return this.$toast({
									title: '已取消！'
								});
							}
						}
					});
				}
			});
			// #endif
		},

		showSurePop: function (e) {
			this.deleteSure = true;
			this.currentId = e.currentTarget.dataset.id;
		},
		hidePop: function (e) {
			this.deleteSure = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.flex-center {
	justify-content: center;
}
.flex-between {
	justify-content: space-between;
}
.flex-column {
	flex-direction: column;
}
.buttom {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	height: 120rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	button {
		border-radius: 100rpx;
		width: 500rpx;
		background-color: #f05a39;
		color: #fff;
	}
}
.text-top {
	width: 224rpx;
	height: 44rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin: 30rpx 40rpx;
}
.user-address {
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	.no-address {
		padding-top: 300rpx;
		text-align: center;
	}
	.address-list {
		padding: 10rpx 0;
		.item {
			padding: 0 30rpx;
			.address {
				padding: 20rpx 0;
				border-bottom: $-solid-border;
			}
			.operation {
				height: 80rpx;
			}
		}
	}
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 118rpx;
		padding: 0 30rpx;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		.btn {
			flex: 1;
			height: 80rpx;
		}
	}
}

.tips-dialog {
	height: 230rpx;
	width: 100%;
}
</style>
